<template>
  <view class="test">
    <view class="bgimage-box">
      <view class="head">
        <view class="headImg"><open-data type="userAvatarUrl"></open-data></view>
        <view v-if="login" class="l_text">
          <open-data type="userNickName"></open-data>
        </view>
        <view v-else class="login" @click="l"> 登录/注册 </view>
      </view>

      <view class="bgview details">
        <view class="details-item" @click="navTo('/pages/productList/index?from=lookList')">
          <view>{{ lookTotal }}</view>
          <view>足迹</view>
        </view>
        <view class="divider"></view>
        <view class="details-item" @click="navOrder">
          <view>{{ orderTotal }}</view>
          <view>订单</view>
        </view>
        <view class="divider"></view>

        <view class="details-item" @click="navTo('/pages/productList/index?from=collect')">
          <view>{{ collectTotal }}</view>
          <view>收藏</view>
        </view>
      </view>
    </view>
    <view class="bgview operate">
      <uni-list :border="false" radius="40rpx" class="hidden">
        <uni-list-item
          title="钱包"
          thumb="/static/icon/qianbao.png"
          showArrow
          link
          :border="false"
          to="/pages/qianbao/index"
        ></uni-list-item>
        <u-divider color="#fa3534" :use-slot="false" half-width="35%"></u-divider>
        <uni-list-item
          title="我的地址"
          thumb="/static/icon/changyongdi.png"
          showArrow
          :border="false"
          link
          to="/pages/myaddress/index"
        ></uni-list-item>
        <u-divider color="#fa3534" :use-slot="false" half-width="35%"></u-divider>
        <uni-list-item
          title="我的优惠券"
          thumb="/static/icon/youhuiquan.png"
          showArrow
          :border="false"
          link
          to="/pages/youhuiquan/wode"
        ></uni-list-item>
        <u-divider color="#fa3534" :use-slot="false" half-width="35%"></u-divider>
        <uni-list-item
          title="我的分销记录"
          thumb="/static/icon/fenxiao.png"
          showArrow
          :border="false"
          link
          to="/pages/fenxiao/wodejilu"
        ></uni-list-item>
      </uni-list>
    </view>
    <view class="bgview operate">
      <uni-list :border="false" radius="40rpx" class="hidden">
        <uni-list-item
          title="设置"
          thumb="/static/icon/shezhi.png"
          showArrow
          :border="false"
          link
          to="/pages/setting/index"
        ></uni-list-item>
        <u-divider color="#fa3534" :use-slot="false" half-width="35%"></u-divider>
        <uni-list-item title="联系我们" thumb="/static/icon/lianxi.png" showArrow :border="false"></uni-list-item>
        <u-divider color="#fa3534" :use-slot="false" half-width="35%"></u-divider>
        <uni-list-item title="关于我们" thumb="/static/icon/guanyu.png" showArrow :border="false"></uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script>
  import goods from '@/services/goods'
  import order from '@/services/order'
  export default {
    data() {
      return {
        userInfor: {},
        collectTotal: 0,
        lookTotal: 0,
        orderTotal: 0,
        nickName: '',
        login: false
      }
    },
    mounted() {
      // 获取个人信息
      this.getUserInfo()
      this.isLogin()
    },
    onShow() {
      this.isLogin()
    },
    methods: {
      navOrder() {
        wx.switchTab({
          url: `/pages/order/my`
        })
      },
      l() {
        wx.navigateTo({
          url: `/pages/phoneLogin/index`
        })
      },
      isLogin() {
        if (uni.getStorageSync('token') && uni.getStorageSync('userId')) {
          // 收藏列表信息
          this.collectListData()
          // 浏览列表信息
          this.lookListData()
          // 订单列表信息
          this.orderListData()
          this.login = true
          return true
        } else {
          this.login = false
          return false
        }
      },
      navTo(url) {
        wx.navigateTo({
          url
        })
      },
      getUserInfo() {
        let that = this
        wx.getUserInfo({
          lang: 'zh_CN',
          success(res) {
            if (res.userInfo) {
              that.userInfor = res.userInfo
            }
          }
        })
      },
      // 收藏数
      collectListData() {
        goods.collectList().then(res => {
          this.collectTotal = this.numberToString(res?.totalCount)
        })
      },
      // 浏览量
      lookListData() {
        goods.lookList().then(res => {
          this.lookTotal = this.numberToString(res?.totalCount)
        })
      },
      // 订单数量
      orderListData() {
        order.list({status: '1,2,3,4'}).then(res => {
          this.orderTotal = this.numberToString(res?.totalCount)
        })
      },
      numberToString(num) {
        if (Object.prototype.toString.call(num) === '[object Number]') return num.toString()
      }
    }
  }
</script>
<style>
  page {
    background-color: #f4f4f4;
  }
</style>
<style lang="scss" scoped>
  * {
    font-family: PingFang SC;
  }
  .test {
    padding-bottom: 100rpx;
    .bgimage-box {
      position: relative;
      background: url('/static/image/mybg.png') no-repeat 50% 75%/200% 200%;
      height: 680rpx;
      .head {
        position: absolute;
        border-radius: 50%;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
        text-align: center;
        .headImg {
          width: 160rpx;
          height: 160rpx;
          border-radius: 50%;
          overflow: hidden;
          text-align: center;
          margin: 0 auto;
        }
        > .l_text {
          margin-top: 12rpx;
          color: #fff;
          font-weight: 300;
          font-size: 36rpx;
          &:first-of-type {
            font-size: 40rpx;
            font-weight: 400;
          }
        }
      }
      .details {
        position: absolute;
        bottom: -25%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        > .details-item {
          width: 140rpx;
          height: 108rpx;
          text-align: center;
          display: flex;
          flex-flow: column nowrap;
          justify-content: space-between;
          box-sizing: border-box;
          > view {
            color: #8992a3;
            font-weight: 600;
            font-size: 32.8rpx;
            &:first-of-type {
              font-weight: 600;
              color: #222b45;
              font-size: 36rpx;
            }
          }
        }
      }
      .divider {
        width: 7rpx;
        height: 40rpx;
        background-color: #edf1f7;
      }
      .quit {
        position: absolute;
        right: 0;
        top: 0;
        width: 60rpx;
        height: 60rpx;
        right: 32rpx;
        top: 24%;
        transform: translateY(-50%);
      }
    }
  }
  .login {
    margin-top: 20px;
    color: #fff;
    font-size: 20px;
    padding: 5px 15px;
    border-radius: 5px;
  }
  .bgview {
    background-color: #fff;
    width: 90%;
    border-radius: 80rpx;
    margin: 0 auto;
    padding: 60rpx 0;
  }
  .operate {
    padding: 40rpx 0;
    &:nth-of-type(2) {
      margin-top: 92rpx;
    }
    margin-bottom: 40rpx;
    margin-top: 40rpx;
  }
  .hidden {
    overflow: hidden;
  }
</style>
<style scoped>
  uni-list >>> .uni-list::after {
    display: none !important;
  }
  uni-list >>> .uni-list::before {
    display: none !important;
  }
  uni-list >>> .uni-list {
    border-radius: 40rpx !important;
    overflow: hidden;
  }
  uni-list >>> .uni-list--base {
    width: 80rpx;
    height: 80rpx;
  }
</style>
